<template>
  <div class="cart">
    <header>
      <i @click="goBack"> < </i>
      <span>购物车</span>
      <span>编辑</span>
    </header>
  </div>
  <section>
    <ul>
      <li v-for="(item, index) in cartGoodsList" :key="index">
        <div class="check">
          <van-checkbox
            class="vantcheck"
            v-model="item.checked"
            @click="checkItem(item.goodsId)"
          ></van-checkbox>
        </div>
        <h2>
          <img :src="item.goodsImgUrl" alt="" />
        </h2>
        <div class="goods">
          <div class="goods-title">
            <span>{{ item.goodsName }}</span>
          </div>
          <div class="goods-num">
            <div class="goods-price">￥{{ item.goodsPrice }}</div>
            <van-stepper
              v-model="item.goodsNum"
              async-change
              @change="onStepperChange($event, item)"
              integer
            ></van-stepper>
          </div>
        </div>
      </li>
    </ul>
  </section>
  <footer>
    <div class="redio">
      <van-checkbox v-model="isAllChecked" @click="checkAll"></van-checkbox>
    </div>
    <div class="total">
      <div>
        全选（<span class="total-active">{{ getTotal.num }}</span
        >）
      </div>
    </div>
    <div class="order">
      <div class="order-price">
        <span class="total-active">￥{{ getTotal.price }}</span>
      </div>
      <div class="order-jiesuan" @click="goOrder">结算</div>
    </div>
  </footer>
</template>

<script setup>
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
import { useAppStore, useUserStore, useGoodsStore } from '@/stores'
import goodsService from '@/common/service/goods.service'
import { storeToRefs } from 'pinia'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
const cart = defineComponent({
  name: 'Cart',
})
const appStore = useAppStore()
const userStore = useUserStore()
const goodsStore = useGoodsStore()
const router = useRouter()

const cartGoodsList = ref([])
const isAllChecked = ref(false)

const { getTotal, isCheckedAll, cartList, selectCartList } = storeToRefs(goodsStore)
const goBack = () => {
  history.go(-2)
}
const goOrder = () => {
  console.log('selectCartList.value :>> ', selectCartList.value)
  if (!selectCartList.value.length) {
    return showToast('没有要购买的商品，请选择！')
  }
  router.push({ path: '/order', query: { selectIds: JSON.stringify(selectCartList.value) } })
}
const fetchGoodsCartData = () => {
  goodsService.getGoodsList(userStore.userInfo).then((res) => {
    res?.data?.forEach((item) => {
      item.checked = true
    })
    cartGoodsList.value = res.data
    //注意，这里要使用深拷贝，否则会出问题JSON.parse(JSON.stringify(xxx))
    goodsStore.initCartList(JSON.parse(JSON.stringify(cartGoodsList.value)))
    setAllStatus()
    console.log('selectCartList :>> ', selectCartList.value)
  })
}

const setAllStatus = () => {
  isAllChecked.value = cartGoodsList.value.every((item) => item.checked)
}

const onStepperChange = (value, item) => {
  goodsService.stepChange({ goodsId: item.goodsId, goodsNum: value }).then((res) => {
    console.log('res :>> ', res)
    if (res.code === 200) {
      goodsStore.stepChange(item.goodsId, value)
    }
  })
}

const asycFromStoreToCartList = () => {
  cartGoodsList.value = JSON.parse(JSON.stringify(cartList.value))
}
const checkItem = (goodsId) => {
  goodsStore.checkItem(goodsId)
  asycFromStoreToCartList()
  isAllChecked.value = isCheckedAll.value
}
const checkAll = () => {
  goodsStore.checkAllFn(isAllChecked.value)
  asycFromStoreToCartList()
}

onMounted(() => {
  appStore.setTabbarStatus(false)
  fetchGoodsCartData()
})

onBeforeUnmount(() => {
  appStore.setTabbarStatus(true)
})
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.173333rem;
  color: #fff;
  background-color: #ff5777;
}

header i {
  padding: 0 0.4rem;
  font-size: 0.586666rem;
}

header span {
  padding: 0 0.4rem;
  font-size: 0.426666rem;
}

section {
  background-color: #f5f5f5;
}

section ul {
  display: flex;
  flex-direction: column;
}

section ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.16rem 0.533333rem;
  margin: 0.213333rem 0;
  background-color: #fff;
}

section ul li .check {
  padding-right: 0.373333rem;
}

section ul li .goods {
  display: flex;
  height: 2.525rem;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 0.4rem;
  font-size: 0.32rem;
}

section ul li .goods .goods-title {
  display: flex;
  font-size: 0.355rem;
  font-weight: 700;
}

section ul li .goods .goods-title i {
  font-size: 0.586666rem;
}

section ul li .goods .goods-price {
  padding: 0.08rem 0;
  color: #ff5777;
  font-weight: 700;
  font-size: 0.4375rem;
}

section ul li .goods .goods-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section ul li img {
  width: 1.973333rem;
  height: 2.573333rem;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.28rem;
  border-top: 0.053333rem solid #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.radio {
  padding: 0 0.4rem;
  margin-left: 5px;
}

.total {
  flex: 1;
  font-size: 0.32rem;
  margin-left: 3px;
}

footer .total .total-active {
  color: #ff5777;
}

footer .order {
  width: 4.4rem;
  text-align: center;
  font-size: 0.426666rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer .order .order-price {
  color: #ff5777;
  line-height: 1.28rem;
  font-weight: 700;
}

footer .order .order-jiesuan {
  padding: 0.125rem 0.3875rem;
  height: 0.6375rem;
  background-color: #ff5777;
  color: #fff;
  font-size: 0.4125rem;
  line-height: 0.6375rem;
  border-radius: 0.4rem;
}
</style>
